var arr = [{
        strId: 0,
        strName: "张三",
        strSex: 0,
        strAge: 18,
        strHop: "看书",
        strPhone: "18612345678",
        delete: false
    },
    {
        strId: 1,
        strName: "李四",
        strSex: 1,
        strAge: 19,
        strHop: "打篮球",
        strPhone: "18626345678",
        delete: false
    },
    {
        strId: 2,
        strName: "王五",
        strSex: 1,
        strAge: 18,
        strHop: "打篮球",
        strPhone: "18612345678",
        delete: false
    },
    {
        strId: 3,
        strName: "赵六",
        strSex: 0,
        strAge: 18,
        strHop: "追剧",
        strPhone: "18612341278",
        delete: false
    },
    {
        strId: 4,
        strName: "钱七",
        strSex: 1,
        strAge: 20,
        strHop: "打游戏",
        strPhone: "15212345678",
        delete: false
    }
]

function dataView() {
    var str = '';
    for (var i = 0; i < arr.length; i++) {
        if (!arr[i].delete) {

            str += '<div class=""><ul><li>' + arr[i].strName + '</li><li>' + getSex(arr[i].strSex) + '</li><li>' +
                arr[i].strAge + '</li><li>' + arr[i].strHop + '</li><li>' + arr[i].strPhone +
                '</li><li class="cz"><button  onclick="stuxu( ' + arr[i].strId +
                ' )">修改</button><button  onclick="del( ' + arr[i].strId + ' )">删除</button></li></ul></div>';
        }
    }
    var student = document.getElementById('contcon');
    student.innerHTML = str;
}
dataView();


//根据ID返回此学生信息
function getStudentByStuId(strId) {
    for (var i = 0; i, arr.length; i++) {
        if (arr[i].strId == strId) {
            return arr[i];
        }
    }
    return null;
}
//更新学生信息
function update(stu) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].strId == stu.strId) {
            arr[i] = stu;
            return true;
        }
    }
    return false;
}

// 修改
function stuxu(id) {
    var edit = document.querySelector('#edit')
    // console.log(edit);
    var srr = "";
    edit.style.display = "block";
    contion.style.display = "none";
    btn.style.display = "none";
    srr = '<ul class="edit"><li>姓名<input type="text" id="txtStuName" value="' + arr[id].strName +
        '" /></li><span class="add_names" id="strname_ts"></span><li>性别<input  id="Sexman" name="sex" type="radio" value=" ' + arr[id].strSex +
        ' "/> 男<input id="Sexwoman" name="sex" type="radio" value=" ' + arr[id].strSex +
        ' "/> 女</li><li>年龄<input type="text" id="txtStuAge" value=" ' + arr[id].strAge +
        ' " /></li><span class="add_ages" id="strage_ts"></span><li>爱好<input type="text" id="txtStuHoppy" value=" ' + arr[id].strHop +
        ' " /></li><li>电话<input type="text" id="txtStuMobile" value=" ' + arr[id].strPhone +
        ' " /></li><span class="add_phones" id="strphone_ts"></span><li class="cz"><button onclick="edit_save(' + id +
        ')" id="ove">保存</button><button onclick="edit_back()">返回</button></li></ul>';
    edit.innerHTML = srr;


    var man = document.getElementById('Sexman');
    var woman = document.getElementById('Sexwoman');
    if (man.value == 1) {
        man.checked = true;
    } else if (woman.value == 0) {
        woman.checked = true;
    }

}

// 编辑页面中：保存
function edit_save(id) {

    var ove = document.getElementById("ove")

    var txtStuName = document.getElementById("txtStuName").value;
    var sex = document.getElementsByName("sex")[0].checked ? 1 : 0;
    var txtStuAge = document.getElementById("txtStuAge").value;
    var txtStuHoppy = document.getElementById("txtStuHoppy").value;
    var txtStuMobile = document.getElementById("txtStuMobile").value;
    arr[id].strName = txtStuName;
    arr[id].strSex = sex;
    arr[id].strAge = txtStuAge;
    arr[id].strHop = txtStuHoppy;
    arr[id].strPhone = txtStuMobile;

    document.getElementById("edit").style.display = "none";
    contion.style.display = "block";
    btn.style.display = "block";
    dataView();
}

function edit_back() {
    document.getElementById("edit").style.display = "none";
    contion.style.display = "block";
    btn.style.display = "block";

}


// 删除
function del(strId) {
    if (confirm("确认删除？")) {
        if (arr[strId].delete = true) {
            alert("删除成功");
        }
    }
    dataView();
}


// 新增
// 创建一个对象具体的属性值添加到对象中
var add_obj = {}
// 点击增加按钮，出现增加的弹框
document.getElementById("btn").onclick = function () {

    document.getElementById("add_name").value = ""
    document.getElementById("name_ts").innerHTML = ""
    document.getElementById("add_age").value = ""
    document.getElementById("age_ts").innerHTML = ""
    document.getElementById("add_hop").value = ""
    document.getElementById("hop_ts").innerHTML = ""
    document.getElementById("add_phone").value = ""
    document.getElementById("phone_ts").innerHTML = ""

    // 现有的对象也得清空
    add_obj = {}

    document.getElementById("zz").style.display = "block"
    contion.style.display = "none";
    btn.style.display = "none";
}

// 正则验证
// 姓名
var add_name = document.getElementById('add_name');
var name_ts = document.getElementById('name_ts');
var reg_name = /^(?:[\u4e00-\u9fa5·]{2,16})$/
// 当失去焦点
add_name.onblur = function () {
    if (reg_name.test(add_name.value)) {
        name_ts.style.display = 'none';

        add_obj.name = add_name.value;
    } else {
        name_ts.innerText = "*请输入2-16位的汉字用户名";
        name_ts.style.color = "red";
    }
}

// 年龄
var add_age = document.getElementById("add_age");
var age_ts = document.getElementById("age_ts");
var reg_age = /^((1[89])|(2[0-9])|(30))$/;
// 当失去焦点
add_age.onblur = function () {
    if (reg_age.test(add_age.value)) {
        age_ts.style.display = 'none';


        add_obj.age = add_age.value;
    } else {
        age_ts.innerText = "*请输入正确年龄（18-30）";
        age_ts.style.color = "red";
    }
}
// 爱好
var add_hop = document.getElementById("add_hop");
var hop_ts = document.getElementById("hop_ts");
var reg_hop = /^[\u4E00-\u9fa5]+$/;
// 当失去焦点
add_hop.onblur = function () {
    if (reg_hop.test(add_hop.value) && add_hop.value !== '') {
        hop_ts.style.display = 'none';

        add_obj.hop = add_hop.value;
    } else {
        hop_ts.innerText = "*非空且只能是汉字";
        hop_ts.style.color = "red";
    }
}

// 电话
var add_phone = document.getElementById("add_phone");
var phone_ts = document.getElementById("phone_ts");
var reg_phone = /^1[3-9]\d{9}$/;
// 当失去焦点
add_phone.onblur = function () {
    if (reg_phone.test(add_phone.value)) {

        var isphone = false; //假设数据库中一直都没有
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].phone == add_phone.value) {
                isphone = true;
                break; //只有一个有，结束循环既可以  
            }
        }
        if (isphone) {
            phone_ts.innerText = "该手机号已经被注册";
            phone_ts.style.color = "red";
            phone_ts.style.display = "block";
        } else {
            phone_ts.innerText = "该手机号可以使用";
            phone_ts.style.color = "green";
            phone_ts.style.display = "block";
            add_obj.phone = add_phone.value; //将通过的属性值增加到对象中
        }

    } else {
        phone_ts.innerText = "*请输入正确手机号";
        phone_ts.style.color = "red";
    }
}

// 保存
function add_save() {
    // 创建一个新的对象
    var obj = {};

    obj.delete = false;
    obj.strAge = +add_obj.age;
    obj.strHop = add_obj.hop;
    obj.strName = add_obj.name;
    obj.strPhone = add_obj.phone;
    obj.strSex = +document.getElementById("add_sex").value; //拼接性别的属性
    obj.strId = arr.length; //拼接id,使用标记删除，可以使用该方式进行拼接
    // data.push(obj)
    console.log(obj)
    if (obj.strName && obj.strAge && obj.strHop && obj.strPhone) { //只有含有这些属性的时候才能进行增加
        console.log(obj)
        arr.push(obj) //增加到数组中
        document.getElementById("zz").style.display = "none" //增加窗口进行隐藏
        contion.style.display = "block";
        btn.style.display = "block";

    }
    dataView(); //更新视图
}
//新增返回
function add_back() {
    document.getElementById("zz").style.display = "none";
    contion.style.display = "block";
    btn.style.display = "block";
}


//判断性别
function getSex(sex) {
    return sex ? "男" : "女";
}